<template>
  <div class="uncheck-pane">
    <el-card
      style="height: 30vh; background-color: antiquewhite"
      shadow="hover"
    >
      <!--      <template #header>-->
      <!--        <el-row>-->
      <!--          <el-col :span="4"><label>待检项目</label></el-col>-->
      <!--          <el-col :span="20">-->
      <!--            <el-row>-->
      <!--              <el-col :span="4"><label>(推荐项目</label></el-col>-->
      <!--              <el-col :span="4"-->
      <!--                ><label>{{ recommendProject?.name }}</label></el-col-->
      <!--              >-->
      <!--              <el-col :span="4"-->
      <!--                ><label>{{ recommendProject?.sysDeptVO.name }}</label></el-col-->
      <!--              >-->
      <!--              <el-col :span="4"-->
      <!--                ><label>{{ recommendProject?.duration }}</label></el-col-->
      <!--              >-->
      <!--              <el-col :span="4">-->
      <!--                )-->
      <!--                <el-popconfirm-->
      <!--                  confirm-button-text="确认"-->
      <!--                  cancel-button-text="取消"-->
      <!--                  :icon="InfoFilled"-->
      <!--                  icon-color="#626AEF"-->
      <!--                  title="确认在该科室下排队吗？"-->
      <!--                  @confirm="queueRecommend(recommendProject?.sysDeptVO.id)"-->
      <!--                >-->
      <!--                  <template #reference>-->
      <!--                    <el-button size="small">排队 </el-button>-->
      <!--                  </template>-->
      <!--                </el-popconfirm></el-col-->
      <!--              >-->
      <!--            </el-row>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </template>-->
      <div v-if="uncheckList.length > 0">
        <el-scrollbar max-height="20vh">
          <el-row v-for="project in uncheckList" :key="project.id">
            <CheckCard :project="project">
              <!--              <template #operate>-->
              <!--                <el-button @click="queue(<ICheckProject>project)"-->
              <!--                  >排队</el-button-->
              <!--                >-->
              <!--              </template>-->
            </CheckCard>
          </el-row>
        </el-scrollbar>
      </div>
      <el-empty image-size="50" v-else description="暂无待检项目" />
    </el-card>
    <DeptDialog
      ref="dept"
      :dept-list="deptList"
      @update-source="updateSource"
    />
  </div>
</template>

<script setup lang="ts">
import { ICheckDept, ICheckProject } from "@/api/queue/types";
import { PropType } from "vue";
import CheckCard from "@/views/client/patient/components/check-card.vue";
import DeptDialog from "@/views/client/patient/components/dept-dialog.vue";
import { queryRecommendProject, queueProject } from "@/api/queue";
import { InfoFilled } from "@element-plus/icons-vue";

const emit = defineEmits(["updateSource"]);

const props = defineProps({
  uncheckList: {
    type: Array as PropType<ICheckProject[]>,
    required: true,
  },
});
const recommendProject = ref<ICheckProject>();
const dept = ref();
const deptList = ref<ICheckDept[]>([]);
const queue = (project: ICheckProject) => {
  if (project.deptList) {
    deptList.value = project.deptList;
    dept.value.init(project.id, project.duration);
  } else {
    console.error("错误");
  }
};
const queueRecommend = (deptId: number) => {
  queueProject(deptId).then((res) => {
    if (res.data) {
      updateSource();
    } else {
      ElNotification({
        title: "提示",
        message: h("i", { style: "color: teal" }, "出现错误!"),
      });
    }
  });
};
const queryRecommend = () => {
  queryRecommendProject().then((res) => {
    if (res) {
      recommendProject.value = res.data;
    }
  });
};
onMounted(() => {
  queryRecommend();
});
const updateSource = () => {
  emit("updateSource");
};
defineExpose({ queryRecommend });
</script>

<style scoped lang="scss">
.uncheck-pane {
}
</style>
